<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多流程切换页面</title>
    <style>
        /* 基础样式保持不变 */
        body {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 40px auto;
            padding: 0 20px;
        }
        /* 页面一长一短，不加滚动条的时候，会导致tab切换来回变 */
        html {
            overflow-y: scroll; /* 始终显示垂直滚动条占位 */
        }


        /* 新增Tab样式 */
        .tabs {
            margin-bottom: 30px;
            border-bottom: 2px solid #ddd;
        }

        .tab-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
        }

        .tab-item {
            padding: 12px 25px;
            cursor: pointer;
            border-radius: 5px 5px 0 0;
            background: #f5f5f5;
            margin-right: 5px;
            transition: all 0.3s;
        }

        .tab-item.active {
            background: #4CAF50;
            color: white;
            position: relative;
            bottom: -2px;
        }

        /* 流程容器切换 */
        .process-container {
            display: none;
        }

        .process-container.active {
            display: block;
        }

        /* 原有流程图样式保持不变 */
        .process {
            position: relative;
            padding-left: 60px;
            margin: 40px 0;
        }

        .process::before {
            content: '';
            position: absolute;
            left: 30px;
            top: 20px;
            bottom: 20px;
            width: 2px;
            background: #4CAF50;
        }

        .step {
            position: relative;
            margin-bottom: 40px;
        }

        .step-node {
            position: absolute;
            left: -50px;
            width: 40px;
            height: 40px;
            background: #4CAF50;
            border-radius: 50%;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .step-content {
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            background: #f8f8f8;
        }

        .step-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        .step-detail {
            color: #666;
            line-height: 1.6;
        }

        /* 隐藏最后一个节点后的竖线 */
        .process .step:last-child::after {
            content: '';
            position: absolute;
            left: -30px; /* 与 .process::before 的 left 对齐 */
            top: 40px;  /* 从节点圆形底部开始 */
            bottom: 20px;
            width: 2px;
            background: white; /* 用背景色覆盖竖线 */
            z-index: 1;
        }
    </style>
</head>
<body>
    <!-- 新增Tab导航 -->
    <nav class="tabs">
        <ul class="tab-list">
            <li class="tab-item active" onclick="switchTab(1)">销售人员流程说明</li>
            <li class="tab-item" onclick="switchTab(2)">系统管理员流程（优先设置）</li>
        </ul>
    </nav>

    <!-- 原始流程 -->
    <div id="process1" class="process-container active">
        <h2>销售人员流程说明</h2>
        <div class="process">
            <div class="step">
                <div class="step-node">1</div>
                <div class="step-content">
                    <div class="step-title">新增客户 & 供应商及维护</div>
                    <div class="step-detail">
                        1、选择【客户和供应商管理】中的【客户管理】，点击【新增】新建客户，填写相关信息，点击【保存】完成客户新增；</br>
                        2、选择【客户开票信息管理】，搜索并选中客户，点击【新增开票信息】，填写相关信息，点击【保存】完成开票信息新增；</br>
                        3、供应商管理同理。
                    </div>
                </div>
            </div>
            <!-- 其他步骤... -->
            <div class="step">
                <div class="step-node">2</div>
                <div class="step-content">
                    <div class="step-title">新建商机及维护</div>
                    <div class="step-detail">
                        1、选择【销售管理】中的【商机管理】，点击【新增】创建商机，填写相关信息，点击【保存】完成商机新增；</br>
                        2、选择【跟进记录】，搜索并选择对应商机，点击【新增跟进记录】，填写相关信息，点击【保存】完成跟进记录；</br>
                        3、后续跟进商机进度，点击【商机管理】中商机列表对应的商机【更新状态】进行商机维护；</br>
                    </div>
                </div>
            </div>

            <div class="step">
                <div class="step-node">3</div>
                <div class="step-content">
                    <div class="step-title">新增项目及维护</div>
                    <div class="step-detail">
                        1、选择【项目管理】，点击【新增】创建项目，填写相关信息，点击【保存】完成项目新增；</br>
                        2、选择【跟进记录】，搜索并选择对应商机，点击【新增跟进记录】，填写相关信息，点击【保存】完成跟进记录；</br>
                    </div>
                </div>
            </div>

             <div class="step">
                <div class="step-node">4</div>
                <div class="step-content">
                    <div class="step-title">新增产品信息</div>
                    <div class="step-detail">
                        1、选择【库存管理】→【产品管理】，点击【新增】，填写相关信息，点击【保存】完成产品类型新增；</br>
                        2、后续可在该模块进行产品型号、规格等信息的维护；</br>
                    </div>
                </div>
            </div>

            <div class="step">
                <div class="step-node">5</div>
                <div class="step-content">
                    <div class="step-title">新增销售合同</div>
                    <div class="step-detail">
                        1、选择【销售管理】→【销售合同】，点击【新增】，填写相关项目、商机、产品信息，点击【保存】完成新增；</br>
                        2、后续可在该模块列表中，进行销售合同的状态维护；
                    </div>
                </div>
            </div>

            <div class="step">
                <div class="step-node">6</div>
                <div class="step-content">
                    <div class="step-title">新增采购合同 & 采购单</div>
                    <div class="step-detail">
                        1、选择【采购管理】→【采购合同】，点击【新增】填写相关销售合同、项目、产品信息，点击【保存】完成新增；</br>
                        2、后续可在该模块列表中，进行采购合同的状态维护；</br>
                        3、选择【产品采购单】，点击【新增】填写采购信息、采购合同、商品信息，点击【创建】完成；</br>
                        4、采购单新建完成后，列表也会显示物流状态和入库状态，后续进行物流状态变更；</br>
                    </div>
                </div>
            </div>

            <div class="step">
                <div class="step-node">7</div>
                <div class="step-content">
                    <div class="step-title">入库单管理（商品入库）</div>
                    <div class="step-detail">
                        1、选择【库存管理】→【入库单管理】，点击【新增】填写采购合同、采购单等相关信息，点击【保存】完成入库单新增；</br>
                        2、入库单创建完成后，可进行入库操作，但须在【采购管理】→【产品采购单】，物流状态变为已签收后可执行；</br>
                    </div>
                </div>
            </div>

            <div class="step">
                <div class="step-node">8</div>
                <div class="step-content">
                    <div class="step-title">出库单管理（商品出库）</div>
                    <div class="step-detail">
                        1、选择【库存管理】→【出库单管理】，点击【新增】填写销售合同、产品等相关信息，点击【创建】完成出库单新增；</br>
                        2、出库单创建完成后，可进行出库操作，并上传验收单；</br>
                        3、可在【库存流水】处查看仓库明细信息。</br>
                    </div>
                </div>
            </div>

            <div class="step">
                <div class="step-node">9</div>
                <div class="step-content">
                    <div class="step-title">财务信息完善（票据录入）</div>
                    <div class="step-detail">
                        1、项目采销、出入库操作完成后，需完善财务信息；</br>
                        2、点击【财务管理】→【开票管理】，点击【新增】关联销售合同、附件等信息，点击【创建】完成开票信息录入；</br>
                        3、点击【财务管理】→【收款管理】，点击【新增】关联销售合同等信息，，点击【创建】完成收款信息录入；</br>
                        4、点击【财务管理】→【收票管理】，点击【新增】填写采购合同、附件等信息，点击【创建】完成收票信息录入；</br>
                        5、点击【财务管理】→【付款管理】，点击【新增】填写采购合同信息，点击【创建】完成付款信息录入；</br>
                    </div>
                </div>
            </div>

            <div class="step">
                <div class="step-node">10</div>
                <div class="step-content">
                    <div class="step-title">商机、合同状态变更</div>
                    <div class="step-detail">
                        1、以上流程均进行完成后，需要变更合同、商机等信息；</br>
                        2、点击【销售管理】→【商机管理】，更新对应商机状态信息；</br>
                        3、点击【销售管理】→【销售合同】，更新对应销售合同的状态；</br>
                        4、点击【采购管理】→【采购合同】，更新对应采购合同的状态；</br>
                        5、至此，项目内的合同、采销流程才算完成；</br>
                    </div>
                </div>
            </div>

            <div class="step">
                <div class="step-node">11</div>
                <div class="step-content">
                    <div class="step-title">售后管理</div>
                    <div class="step-detail">
                        1、点击【售后管理】→【工单管理】，点击【新增】填写相关信息，创建相关销售合同的工单；</br>
                        2、工单状态变更为“已受理”后，可在点击【售后管理】→【工单跟进记录】中，创建跟进记录；</br>
                    </div>
                </div>
            </div>

            <div class="step">
                <div class="step-node">12</div>
                <div class="step-content">
                    <div class="step-title">项目收尾</div>
                    <div class="step-detail">
                        1、根据上述流程，判定项目状态后，项目负责人需要最后在【项目管理】中，对于项目状态进行调整；</br>
                        2、到此整体流程才算结束；</br>
                    </div>
                </div>
            </div>

            <div class="step">
                <div class="step-node">13</div>
                <div class="step-content">
                    <div class="step-title">查看统计报表分析</div>
                    <div class="step-detail">
                        在【统计报表】模块中，可查看各维度数据统计，进行数据分析、汇报等相关操作；</br>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 新增测试流程 -->
    <div id="process2" class="process-container">
        <h2>系统管理员流程（优先设置）</h2>
        <div class="process">
            <div class="step">
                <div class="step-node">1</div>
                <div class="step-content">
                    <div class="step-title">设置编码规则</div>
                    <div class="step-detail">
                        1、点击【系统管理】中的【编码规则】，可以调整对应名称的编码规则，即前缀缩写信息；</br>
                        2、点击【客户开票信息管理】，搜索客户，点击【新增开票信息】，填写相关信息，点击【保存】完成开票信息新增。</br>
                        3、供应商管理同理。
                    </div>
                </div>
            </div>
            <!-- 其他测试步骤... -->
            <div class="step">
                <div class="step-node">2</div>
                <div class="step-content">
                    <div class="step-title">设置公司主体等信息</div>
                    <div class="step-detail">
                        1、进入【系统管理】中的【编码规则】，点击【新增】创建公司主体相关信息录入；</br>
                        2、创建完成后，进入【对公账户管理】，搜索并选中已创建的公司后，点击【新增】录入公司对公账户信息。</br>
                        3、设置仓库信息：选择【库存管理】→【仓库管理】，配置平台仓库信息，录入相关信息进行管理。</br>
                    </div>
                </div>
            </div>

            <div class="step">
                <div class="step-node">3</div>
                <div class="step-content">
                    <div class="step-title">角色配置、用户管理</div>
                    <div class="step-detail">
                        1、进入【系统管理】中的【角色管理】，点击【新增】角色，可以设置角色名称信息；</br>
                        2、在【角色管理】列表中，点击【权限分配】，进行菜单选项配置，配置完成，即角色创建完成；</br>
                        3、进入【系统管理】中的【用户管理】，可以进行重置密码、角色分配、设为访客、禁用等功能；</br>
                        4、点击【角色分配】进行用当前用户角色配置，配置完成，即用户创建完成；</br>
                    </div>
                </div>
            </div>

            <div class="step">
                <div class="step-node">4</div>
                <div class="step-content">
                    <div class="step-title">基础配置完成</div>
                    <div class="step-detail">
                        基础设置完成，用户可正常操作</br>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script>
        function switchTab(tabNumber) {
            // 切换Tab按钮状态
            document.querySelectorAll('.tab-item').forEach(item => {
                item.classList.remove('active');
            });
            event.target.classList.add('active');

            // 切换内容显示
            document.querySelectorAll('.process-container').forEach(container => {
                container.classList.remove('active');
            });
            document.getElementById(`process${tabNumber}`).classList.add('active');
        }
    </script>
</body>
</html>